<template>
  <div class="login-div">
    <div class="login-body">
      <a-flex vertical>
        <div class="login-title">欢 迎 登 录</div>
      </a-flex>
      <a-flex>
        <div class="login-form">
          <a-form
              :model="formState"
              name="basic"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 16 }"
              autocomplete="off"
              @finish="onFinish"
              @finishFailed="onFinishFailed"
          >
            <a-form-item
                label="账号"
                name="name"
            >
              <a-input v-model:value="formState.name" class="login-input"  placeholder="请输入手机号"/>
            </a-form-item>
            <a-divider style="margin-left: 30px;"/>
            <a-form-item
                label="密码"
                name="passwd"
            >
              <a-input-password v-model:value="formState.passwd" class="login-input" placeholder="请输入密码"/>
            </a-form-item>
            <a-divider style="margin-left: 30px;"/>

            <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
              <a-button type="primary" html-type="submit" class="login-submit" @click="subLogin">登 录</a-button>
            </a-form-item>
          </a-form>
        </div>
      </a-flex>
      <div class="login-tips">注意: 首次登录将自动使用该账号和密码进行注册</div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue';
import {notification} from "ant-design-vue";
import ajax from "@/main"
import { useRouter } from 'vue-router';

const router = useRouter();

const formState = reactive({
  name: '',
  passwd: ''
});
const onFinish = values => {
  console.log('Success');
};
const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
};
function subLogin() {
  if (formState.name === '' || formState.passwd === '') {
    notification['warning']({
    message: '错误提示',
    description:
      '未填写账号或密码！',
  });
    return false; // 假设这是表单提交函数，返回false可以阻止表单提交
  }
  ajax.post('/demo/user/login', formState).then(res => {
    if (res.data.code === 200){
      localStorage.setItem('token', res.data.data.token)
      localStorage.setItem('id', res.data.data.id)
      localStorage.setItem('tmpUser', formState.name)
      localStorage.setItem('tmpPass', formState.passwd)
      router.push('/');
    }else {
      notification['error']({
        message: '错误提示',
        description: res.data.msg,
      });
    }
  })
}

onMounted(() => {
  const tmpUser = localStorage.getItem('tmpUser');
  const tmpPass = localStorage.getItem('tmpPass');
  if (tmpUser && tmpPass) formState.username = tmpUser;  formState.password = tmpPass;
});

</script>

<style scoped>
.login-div {
  height: 100vh;
  display: flex; /* 使用Flexbox */
  align-items: center;
  justify-content: flex-end; /* 将子元素向右对齐 */
  padding-right: 400px; /* 为.login-body右侧留出100px的空间 */
  background-image: url("@/assets/images/backgroundnew.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.login-body {
  width: 400px;
  height: 460px;
  background-color: rgba(255, 255, 255, 0.99); /* 稍微调整了透明度值，以符合rgba的格式 */
  border: 2px solid dodgerblue;
}

.login-title {
  margin-top: 40px;
  font-size: 30px;
  text-align: center;
  margin-left: -40px;
  font-weight: bold;
}

.login-form {
  margin-top: 50px;
  padding: 20px;
  text-align: center;
}

.login-input {
  border: none;
  height: 40px;
  width: 200px;
}

.login-submit {
  width: 300px;
  height: 40px;
  margin-left: -60px;
  font-size: 18px;
  margin-top: 10px;
}

.login-tips {
  font-size: 14px;
  color: darkgrey;
  text-align: center;
}
</style>